import React, { Component } from 'react'
import store from './store'
import { getInputChangeValue, getAddTodoItem, getReduceTodoItem, getListInfo } from './store/actionCreator'
import TodoListUI from './TodoListUI'
import 'antd/dist/antd.css'

class TodoList extends Component {
  constructor(props) {
    super(props)
    this.state = store.getState()
    this.handleChangeInput = this.handleChangeInput.bind(this)
    this.handleAddTodoItem = this.handleAddTodoItem.bind(this)
    this.handleReduceTodoItem = this.handleReduceTodoItem.bind(this)
    this.handleStoreChange = this.handleStoreChange.bind(this)
    store.subscribe(this.handleStoreChange)
  }
  componentDidMount() {
    const action = getListInfo()
    store.dispatch(action)
  }
  render() {
    return (
      <TodoListUI
        list={this.state.list}
        inputValue={this.state.inputValue}
        handleChangeInput={this.handleChangeInput}
        handleAddTodoItem={this.handleAddTodoItem}
        handleReduceTodoItem={this.handleReduceTodoItem}
      />
    )
  }
  handleChangeInput(e) {
    const action = getInputChangeValue(e.target.value)
    store.dispatch(action)
  }
  handleAddTodoItem() {
    const action = getAddTodoItem()
    store.dispatch(action)
  }
  handleReduceTodoItem(index) {
    const action = getReduceTodoItem(index)
    store.dispatch(action)
  }
  handleStoreChange() {
    this.setState(() => {
      return store.getState()
    })
  }
}


export default TodoList
